body{
    background: #000000c9;
    margin: 0;
}

.lamp{
    position: relative;
    margin: 0 auto;
    width: 0.7rem;
    height: 10rem;
    background-image: 
        linear-gradient(#000000b3, #000000b3),
        linear-gradient(#000000b3, #000000b3),
        linear-gradient(#000000b3, #000000b3);
    background-repeat: no-repeat;
    background-size: 
        0.15rem 8rem,
        0.4rem 0.8rem,
        0.7rem 2rem;
    background-position: 
    50% 0,
    0.14rem 8rem,
    0 8.8rem;

    }    

.lamp::before,
.lamp::after {
    content: "";
    position: absolute;
}

.lamp::before{
    left: -1.65rem;
    bottom: -4rem;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background: #ffffff08;
    box-shadow: inset 2px -2px 10px #ffffff12;
    transition:all 0.75s;
}

.light,
.light::before{
    position: absolute;
}

.light{
    top: 10.05rem;
    left:0.3rem;
    width:0;
    height:1.5rem;
    border-right: 0.2 solid #ffffff0d;
}

.light::before{
    content: "";
    top: 1.5rem;
    left: -0.55rem;
    width: 0.9rem;
    height: 0.9rem;
    border-radius: 50%;
    border: 0.2rem solid #ffffff0d;
    box-shadow: 0px 0px 50px #ffffff00;

}

.switch {
    position: fixed;  
    display: flex;
    justify-content: center;
    align-items: center; 
    width: 100%; 
    height: 100%;
    cursor: pointer;
    z-index: 2;
    opacity: 0;
}


input:checked~.lamp::before{
    background: #ffffff;
    box-shadow: 
    0px 2px 10px #ffffffcc,
    0px 5px 50px #ffffffcc,
    0px 8px 80px #ffffff99,
    0px 8px 120px #ffffff99;
}

@media screen and (max-width: 400px) {


    }